<template>
	<view style="background-color: #f3f3f3;position: relative;height: 100vh;">
		<!-- 安卓头部样式 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="header">
			<view class="header-container">
				<view class="title">
					<uni-icons type="back" size="20" @tap="back"></uni-icons>
					<text>
						{{NavigationBarTitle}}
					</text>
					<uni-icons type="back" size="20" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<view class="main_one">
			<view class="one_one">
				<view>
					<text class="text">账户总额</text>
				</view>
				<view>
					<image src="../../static/property/particular.png" mode="" style="width: 32rpx;height: 38rpx;">
					</image>
				</view>
			</view>
			<view class="one_two">
				<text>500.00</text>
			</view>
			<view class="one_one">
				<view style="display: flex;align-items: center;">
					<text class="text">今日收益(元)</text>
					<uni-icons type="info" color="#999" size="20"></uni-icons>
				</view>
				<view>
					<text class="text">累计收益(元)</text>
				</view>
			</view>
			<view class="one_one" style="margin-top: 22rpx;">
				<view>
					<text class="four_title" style=""></text>
				</view>
				<view>
					<text class="four_title" style="">2871.50</text>
				</view>
			</view>
		</view>

		<view class="main_two">
			<view class="">
				<text>成功购买500.00元</text>
			</view>
			<view>
				<text class="text">预计3-15日计息</text>
				<uni-icons type="forward" color="#999" size="14"></uni-icons>
			</view>
		</view>

		<view class="main_three">
			<view class="three_box" v-for="item in 2" :key="item">
				<view>
					<text style="font-size: 30rpx;color: #333;display: block;margin-bottom: 20rpx;">灵活账号(元)</text>
					<text class="text">近30天年化投资回报率</text>
				</view>
				<view>
					<text
						style="font-size: 30rpx;color: #f85656;font-weight: bold;display: block;margin-bottom: 20rpx;">0.75</text>
					<text class="text">3.95%</text>
				</view>
			</view>
		</view>
	
		<view class="main_four">
			<view class="four_box">
				<view>
					收益起始日期
				</view>
				<view style="font-size: 28rpx;color: #999;">
					2021-09-15
				</view>
			</view>
			<view class="four_box2">
				<view>
					产品详细规则及案例
				</view>
			</view>
		</view>
	
		<view class="main_five">
			<view class="five_box">
				 <text>今日收益将于20点左右更新</text>
			</view>
			<view class="five_box2">
				<view class="box2_one">
					<uni-icons type="more-filled" size="20"></uni-icons>
				</view>
				<view class="box2_two">
					<text>转出</text>
				</view>
				<view class="box2_three">
					<text>购买</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				NavigationBarTitle: "汇添富双利劵A详情"
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.NavigationBarTitle,
			});
		}
	}
</script>

<style scoped lang="scss">
	.text {
		font-size: 24rpx;
		color: #999;
	}

	// 安卓头部样式
	/* #ifndef MP-WEIXIN */
	.header {
		height: 180rpx;
		background-color: #fff;
		overflow: hidden;

		.header-container {
			width: 100%;
			height: 120rpx;
			box-sizing: border-box;
			padding: 30rpx;
			line-height: 120rpx;
			margin-top: 50rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #000;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
			}

		}
	}

	/* #endif */

	.main_one {
		background-color: #fff;
		box-sizing: border-box;
		padding: 60rpx;

		.one_one {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.one_two {
			margin: 24rpx 0 60rpx 0;
			font-size: 52rpx;
			color: #f85656;
			font-weight: bold;
		}

		.four_title {

			font-size: 44rpx;
			color: #333;
			font-weight: bold;
		}
	}

	.main_two {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		margin: 20rpx 0;
		padding: 0 60rpx;
		background-color: #fff;
		height: 72rpx;
	}

	.main_three {
		box-sizing: border-box;
		padding: 0 60rpx;
		background-color: #fff;

		.three_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f3f3f3;
			height: 150rpx;
		}
	}

	.main_four{
		margin: 20rpx 0;
		box-sizing: border-box;
		padding: 0 60rpx;
		background-color: #fff;
		.four_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 2rpx solid #f3f3f3;
		}
		.four_box2{
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 2rpx solid #f3f3f3;
		}
	}

	.main_five{
		position: absolute;
		bottom: 0;
		.five_box{
			width: 750rpx;
			height: 52rpx;
			background-color: #dfe6f3;
			color: $uni-bg-color-header;
			text-align: center;
			line-height: 52rpx;
			font-size: 24rpx;
			
		}
		.five_box2{
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			line-height: 100rpx;
			text-align: center;
			.box2_one{
				height: 100rpx;
				width: 100rpx;
			}
			.box2_two{
				flex-grow: 1;
				height: 100rpx;
				color: $uni-bg-color-header;
				border-left: 4rpx solid #f3f3f3;
			}
			.box2_three{
				flex-grow: 1;
				background-color: $uni-bg-color-header;
				color: #fff;
			}
		}
	}
</style>
